<template>
	<view class="page" style='height:100%;'>
		<view style="width:100%; padding:15rpx0; flex-wrap:nowrap;">
			
			<view class="searchBox">
				<view class="inputBox"> 
					<input type="text" :placeholder="defaultKeyword" v-model="keyword" @confirm="doSearch(false)"
					 placeholder-class="placeholder-class" confirm-type="search">
				</view>
				<view class="searchBtn" @tap="doSearch(false)">搜索</view>
			</view>
			
		</view>
		<view class="grace-cate" style='top: 115upx; width:100%; height:calc(100% - 126upx);'>
			<scroll-view scroll-y class="grace-cate-left" :scroll-into-view="leftTo">
				<view v-for="(item, index) in mainCate" :key="index" :class="['item', currentCateIndex == item.cateid ? 'current' : '']" :data-cateid="item.cateid" @tap='changCate' :id="'cate'+item.cateid">{{item.name}}</view>
			</scroll-view>
			<scroll-view class="grace-cate-right" scroll-y :scroll-into-view="productListTo" @scroll="rscroll">
				<block v-for="(cate, index) in mainCate" :key="index">
					<view class="grace-title grace-nowrap grace-space-between" style="margin-top:15px; margin-left: 15px;" :id="'productList'+cate.cateid">
						<view class="grace-h5 grace-blod">{{cate.name}}</view>
					</view>
					
					<view class="grace-news-list">
						<view class="grace-news-list-items" v-for="(product, productIndex) in allProducts['cate'+cate.cateid+'products']" :key="productIndex">
							<image src="../../../static/daohang.png" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
							<view class="grace-news-list-title">
								<view class="grace-news-list-title-main">{{product.name}}</view>
							</view>
						</view>
					</view>
					
				</block>
			</scroll-view>
	  </view>
	</view>
</template>
<script>
import {
	mapState,
	mapMutations
} from 'vuex';	
var scrollTimer = null;
var pageHeight = 100;
export default {
	computed: {
		...mapState(['userInfo','databaseInfo','propertyInfo'])
	},		
	data() {
		return {
			currentCateIndex : 1,
			// 左侧滚动定位
			leftTo : 'cate1',
			defaultKeyword: "",
			// 产品列表滚动定位
			productListTo: 'productList1',
			//分类
			mainCate: [],
			// 产品列表对应分类
			allProducts: []
		}
	},
	onLoad:function(){
		uni.getSystemInfo({
			success: function(res) {
			pageHeight = res.windowHeight;
			},
		});
		this.getAllProducts();
		this.init();
	},
	methods:{
		...mapMutations(['login','setDatabaseInfo','setPropertyInfo']),
		init() {
			this.defaultKeyword = "搜资源导航分类";
		},
		doSearch(){
			this.getAllProducts();
		},
		getAllProducts() {
			var str = 'xwzx=news_source;qklw=qklw_source;ts=book_source;jsbk=baike_source;hylw=hylw_source;xwlw=xwlw_source;';
// 			for(var i=0;i<this.databaseInfo.length;i++){
// 				str+=this.databaseInfo[i].key+'=zi_xun_lan_mu;'
// 			}
			console.log('str=' + str);
			uni.request({
				url: this.serverUrl + 'search-api/getCategoryList',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: {
					searchText:this.keyword,
					databaseDicts:str
				},
				method: "POST",
				success: (r) => {
					//console.log(r);
					if(r.data.code=='000000') {
						var temp = {};
						this.mainCate = [];
						for(var key in r.data.data){
							var keyMap = r.data.data[key];
							for(var k in keyMap){
								var mname="";
								for(var x=0;x<this.databaseInfo.length;x++){
									if(this.databaseInfo[x].key==k){
										mname=this.databaseInfo[x].value
										break;
									}
								}
								this.mainCate.push({
									cateid: k, 
									name: mname,
								});
								var dtemp=[];
								for(var i=0;i<keyMap[k].length;i++){
									dtemp.push({
										productId : k,
										name:keyMap[k][i].nameCn,
										img: "https://m.360buyimg.com/babel/jfs/t30184/230/476184793/260944/53cc2bbc/5bf4b25dN3b673c83.jpg!q70.jpg",
									});
								}
								temp['cate'+k+'products'] = dtemp;
								}
							}
							this.allProducts = temp;
					}else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				}
			})
		},			
		// 分类切换
		changCate:function(e){
			var cateid = e.currentTarget.dataset.cateid;
			this.currentCateIndex = cateid;
			this.leftTo           = 'cate'+cateid;
			this.productListTo    = 'productList' + cateid;
		},
		// 产品区域滚动
		rscroll : function(e){
			var sctop = e.detail.scrollTop;
			if (scrollTimer != null) { clearTimeout(scrollTimer);}
			scrollTimer = setTimeout(function(){
			  this.getIndex(0, sctop);
			}.bind(this), 80);
		},
		// 动态识别分类激活
		getIndex: function (i, sctop){
			var _self = this;
			var query = wx.createSelectorQuery();
			query.select('#productList' + this.mainCate[i].cateid).boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function (res){
				if (res[0].top + pageHeight / 2 > 0){
					_self.currentCateIndex =  _self.mainCate[i].cateid;
					_self.leftTo           =  'cate' + _self.mainCate[i].cateid;
				}else{
					i++;
					if (i < _self.mainCate.length) { _self.getIndex(i, sctop); }
				}
			});
		},
		// 加入到购物车
		addtocard : function(e){
			var productid = e.currentTarget.dataset.productid;
			uni.showToast({
				title: '产品id : ' + productid+', 请根据项目需求自行完善后续代码',
				icon:"none"
			})
		},
		// 搜索
		searchNow : function(e){
			var k = e.detail.value;
			uni.showToast({
				title: '关键字 : ' + k + ', 请根据项目需求自行完善后续代码',
				icon: "none"
			});
		}
	}
}
</script>
<style>
page{height:100%; background-color: rgb(242, 242, 242);}
.grace-search-icon:before{color:#E2231A;}
.grace-news-list-items {
	margin-left: 20upx;
	margin-right: 20upx;
	
}
.grace-news-list-title {
	width: auto;
}
.grace-news-list-items > image{width:80px; height:80px;}
.grace-news-list-title .price{line-height:1.8em; color:#E2231A;}
.grace-add-to-card{width:26px; height:26px; line-height:22px; border:1px solid #E2231A; font-size:26px; color:#E2231A; float:right; text-align:center; border-radius:26px;}

.searchBox {
	width: 95%;
	background-color: rgb(242, 242, 242);
	padding: 7.5px 2.5%;
	display: flex;
	justify-content: space-between;
}

.searchBox .inputBox {
	width: 85%;
	flex-shrink: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.searchBox .searchBtn {
	width: 20%;
	margin: 0 0 0 2%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 14px;
	color: #fff;
	background-color: #417dc9;
	border-radius: 10px;
}

.searchBox .inputBox>input {
	width: 100%;
	height: 30px;
	font-size: 30upx;
	border: 0;
	border-radius: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0 3%;
	margin: 0;
	background-color: #ffffff;
}

.grace-news-list-items > image {
	height: 90upx;
	width: 90upx;
}
.grace-news-list-title-main {
	line-height: 90upx;
	height: 90upx;
}
	
</style>